<template>
  <div class="box" v-if="arr">
     <div>
         <ul>
             <li v-for="(item,index) in arr"
             :key="index"
             >
             
             <img :src="item.images[0].url" v-lazy="img" alt="">
            
             <p>{{item.shareInfo.title}}</p>
             <div  class="us-box">
                 <div class="img-box">
                     
                    
                     <img :src="item.user.avatarurl" alt="">
                        <span>{{item.user.nickName}}</span>
                 </div>
                 <div class="uu-box">
                     <div class="dian" @click="item.video.dur++">
                         <img src="//p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" alt="">
                     </div>
                     <span >{{item.video.dur}}</span>
                 </div>
             </div>
             </li>
         </ul>
     </div>
  </div>
</template>
<script>
import myHeadtu from'../components/myhead-tu.vue';

export default {
    components:{
myHeadtu
    },
    data(){
        return{
            arr:null
        }
    },
    methods:{   
          async qingQiu() {
      let re = await this.axios.get("https://apis.netstart.cn/maoyan/video/short/0");
      console.log(re.data.data.feeds);
      this.arr=re.data.data.feeds
      console.log(this.arr);

          }
    },
    created(){
        this.qingQiu()
        
    }
}
</script>
<style lang="less" scoped>
.box{
    width: 100%;
    padding-bottom: 70px;
    >div{
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                position: relative;
                box-sizing: border-box;
               width: 49%;
               margin: 1px;
               height: 300px;
               img{
                   width: 100%;
                   height: 300px;
               }
               >p{
                   box-sizing: border-box;
                   padding: 0 5px;
                   position: absolute;
                   left: 0;
                   bottom: 30px;
                   font-size: 15px;
                   color: white;
                   width: 100%;
                   height: 60px;
                   line-height: 30px;
                   background-color: rgba(0,9,0,0.5);
                    // 文字隐藏。。。

                    display: -webkit-box;

                    -webkit-box-orient: vertical;

                    -webkit-line-clamp: 2;

                    overflow: hidden;

               }
               .us-box{
                   box-sizing: border-box;
                   padding: 0 10px;
                   padding-bottom: 5px;
                   background-color:rgba(0,9,0,0.5);
                   height: 30px;
                   width: 100%;
                    position: absolute;
                   left: 0;
                   bottom: 0px;
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   .img-box{
                       
                       display: flex;
                       font-size: 10px;
                        width: 100%;
                        height: 21px;
                       img{
                           border-radius: 50px;
                           overflow: hidden;
                           width: 21px;
                           height: 21px;
                           vertical-align: text-top;
                       }
                       span{
                           color: white;
                           padding-top: 3px;
                           padding-left: 4px;

                       }
                   }
                   .uu-box{
                       width: 50px;
                       display: flex;
                       .dian{
                           width: 18px;
                           height: 18px;
                           img{
                               width: 18px;
                               height: 18px;
                           vertical-align: text-top;
                               
                           }
                           
                       }
                       span{
                           margin-left: 10px;
                           font-size: 10px;
                           color: white;
                           padding-top: 3px;
                       }
                   }
               }
            }
        }
    }
}
</style>